<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>问卷填写页面</title>
</head>
<style>
  #app{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #app .btn{
    margin-top: 20px;
  }
</style>
<body>
<div id="app">
  <div class="title">
    <h1>问卷{{id}}</h1>
    <h2>被评审人：{{person.name}}</h2>
  </div>
  <div class="questions">
    <div class="item" v-for="(item, index) in questionNaire.questions">
      <p>{{index+1}}.{{item.content}}</p>
      <el-radio-group v-model="itemGrade[index]">
        <el-radio v-for="item in [1,2,3,4,5,6,7,8,9,10]"
                  :key="item" :label="item">
          {{item}}分
        </el-radio>
      </el-radio-group>
    </div>
  </div>
  <el-button @click="submit()" type="primary" class="btn">提交问卷</el-button>
</div>
</body>
<!--引入vue-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--引入jquery-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      id:null,
      id2:null,
      //问卷数据
      questionNaire:{
        questions:[],
      },
      person:{
        name:null,
        id:null
      },
      itemGrade:[]
    },
    created() {
      var _that = this;
      //获取问卷id
      var id = [[${id}]];
      this.id = id;//问卷id
      var id2 = [[${id2}]];//被审查人id
      this.id2 = id2;

      //请求后端接口，获取问卷数据 根据当前问卷id
      $.ajax({
        url:'singleQuery',
        data:{
          id:this.id,
          id2:this.id2
        },
        type:'GET',
        success:function(res){ //成功回调函数
          console.log(res.infoList)
          _that.questionNaire.questions = res.infoList;//问卷问题列表
          _that.person.name = res.user.userName;//被审查人信息
          _that.person.id = res.user.id;
        },
        error:function (err){ //失败回调函数
          this.$message.error(err);
        }
      });
    },
    methods:{
      submit(){
        var sum=0;
        if(this.itemGrade.length < this.questionNaire.questions.length){
          this.$message.error('存在未填写问题！');
          return;
        }else{
          for(let i=0 ; i< this.itemGrade.length ;i++){
            sum+=this.itemGrade[i];
          }
          // alert(sum);
          //提交成绩
          $.ajax({
            url:"submit",
            data:{
              informantId: this.id2,
              questionNaireId: this.id,
              grade: sum,
            },
            type:'GET',
            success: (res) => { //成功回调函数
              alert('提交成功！');
              // _that.message.success('提交成功！')
              window.location.href= "/question/showques";
            },
            error:function (err){ //失败回调函数
              alert(err);
            }
          })
        }
      }
    }
  })
</script>
</html>